<template>
  <div>
    <div class="goods-relevant" data-v-f1713bb2 data-v-b185dbf4>
      <div class="header" data-v-f1713bb2>
        <i class="icon" data-v-f1713bb2></i>
        <span class="title" data-v-f1713bb2>猜你喜欢</span>
      </div>
      <div class="xtx-carousel" data-v-51374c56 data-v-f1713bb2>
        <ul class="carousel-body" data-v-51374c56>
          <li class="carousel-item" v-show="fade == 0" data-v-51374c56>
            <div class="slider" data-v-51374c56>
              <a href="#/product/3997974" class data-v-51374c56>
                <img :src="str[0].picture" data-v-51374c56 />
                <p class="name ellipsis" data-v-51374c56>{{ str[0].name }}</p>
                <p class="price" data-v-51374c56>¥{{ str[0].price }}</p>
              </a>
              <a href="#/product/3997974" class data-v-51374c56>
                <img :src="str[1].picture" data-v-51374c56 />
                <p class="name ellipsis" data-v-51374c56>{{ str[1].name }}</p>
                <p class="price" data-v-51374c56>¥{{ str[1].price }}</p>
              </a>
              <a href="#/product/3997974" class data-v-51374c56>
                <img :src="str[2].picture" data-v-51374c56 />
                <p class="name ellipsis" data-v-51374c56>{{ str[2].name }}</p>
                <p class="price" data-v-51374c56>¥{{ str[2].price }}</p>
              </a>
              <a href="#/product/3997974" class data-v-51374c56>
                <img :src="str[3].picture" data-v-51374c56 />
                <p class="name ellipsis" data-v-51374c56>{{ str[3].name }}</p>
                <p class="price" data-v-51374c56>¥{{ str[3].price }}</p>
              </a>
            </div>
          </li>
          <li class="carousel-item" v-show="fade == 1" data-v-51374c56>
            <div class="slider" data-v-51374c56>
              <a href="#/product/3997974" class data-v-51374c56>
                <img :src="str[4].picture" data-v-51374c56 />
                <p class="name ellipsis" data-v-51374c56>{{ str[4].name }}</p>
                <p class="price" data-v-51374c56>¥{{ str[4].price }}</p>
              </a>
              <a href="#/product/3997974" class data-v-51374c56>
                <img :src="str[5].picture" data-v-51374c56 />
                <p class="name ellipsis" data-v-51374c56>{{ str[5].name }}</p>
                <p class="price" data-v-51374c56>¥{{ str[5].price }}</p>
              </a>
              <a href="#/product/3997974" class data-v-51374c56>
                <img :src="str[6].picture" data-v-51374c56 />
                <p class="name ellipsis" data-v-51374c56>{{ str[6].name }}</p>
                <p class="price" data-v-51374c56>¥{{ str[6].price }}</p>
              </a>
              <a href="#/product/3997974" class data-v-51374c56>
                <img :src="str[7].picture" data-v-51374c56 />
                <p class="name ellipsis" data-v-51374c56>{{ str[7].name }}</p>
                <p class="price" data-v-51374c56>¥{{ str[7].price }}</p>
              </a>
            </div>
          </li>
          <li class="carousel-item" v-show="fade == 2" data-v-51374c56>
            <div class="slider" data-v-51374c56>
              <a href="#/product/3997974" class data-v-51374c56>
                <img :src="str[8].picture" data-v-51374c56 />
                <p class="name ellipsis" data-v-51374c56>{{ str[8].name }}</p>
                <p class="price" data-v-51374c56>¥{{ str[8].price }}</p>
              </a>
              <a href="#/product/3997974" class data-v-51374c56>
                <img :src="str[9].picture" data-v-51374c56 />
                <p class="name ellipsis" data-v-51374c56>{{ str[9].name }}</p>
                <p class="price" data-v-51374c56>¥{{ str[9].price }}</p>
              </a>
              <a href="#/product/3997974" class data-v-51374c56>
                <img :src="str[10].picture" data-v-51374c56 />
                <p class="name ellipsis" data-v-51374c56>{{ str[10].name }}</p>
                <p class="price" data-v-51374c56>¥{{ str[10].price }}</p>
              </a>
              <a href="#/product/3997974" class data-v-51374c56>
                <img :src="str[11].picture" data-v-51374c56 />
                <p class="name ellipsis" data-v-51374c56>{{ str[11].name }}</p>
                <p class="price" data-v-51374c56>¥{{ str[11].price }}</p>
              </a>
            </div>
          </li>
          <li class="carousel-item" v-show="fade == 3" data-v-51374c56>
            <div class="slider" data-v-51374c56>
              <a href="#/product/3997974" class data-v-51374c56>
                <img :src="str[12].picture" data-v-51374c56 />
                <p class="name ellipsis" data-v-51374c56>{{ str[12].name }}</p>
                <p class="price" data-v-51374c56>¥{{ str[12].price }}</p>
              </a>
              <a href="#/product/3997974" class data-v-51374c56>
                <img :src="str[13].picture" data-v-51374c56 />
                <p class="name ellipsis" data-v-51374c56>{{ str[13].name }}</p>
                <p class="price" data-v-51374c56>¥{{ str[13].price }}</p>
              </a>
              <a href="#/product/3997974" class data-v-51374c56>
                <img :src="str[14].picture" data-v-51374c56 />
                <p class="name ellipsis" data-v-51374c56>{{ str[14].name }}</p>
                <p class="price" data-v-51374c56>¥{{ str[14].price }}</p>
              </a>
              <a href="#/product/3997974" class data-v-51374c56>
                <img :src="str[15].picture" data-v-51374c56 />
                <p class="name ellipsis" data-v-51374c56>{{ str[15].name }}</p>
                <p class="price" data-v-51374c56>¥{{ str[15].price }}</p>
              </a>
            </div>
          </li>
        </ul>
      </div>
      <a href="javascript:;" class="carousel-btn prev1" data-v-51374c56 @click="prev">
        <i class="iconfont icon-angle-left" data-v-51374c56></i>
      </a>
      <a href="javascript:;" class="carousel-btn next1" data-v-51374c56 @click="next">
        <i class="iconfont icon-angle-right" data-v-51374c56></i>
      </a>
      <div class="carousel-indicator" data-v-51374c56>
        <span :class="{ active: fade == 0 }" @click="clk(0)"></span>
        <span :class="{ active: fade == 1 }" @click="clk(1)"></span>
        <span :class="{ active: fade == 2 }" @click="clk(2)"></span>
        <span :class="{ active: fade == 3 }" @click="clk(3)"></span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      str: [],
      fade: 0,
    };
  },
  mounted() {
    // this.$watch(() => {
      axios.get('http://pcapi-xiaotuxian-front-devtest.itheima.net/goods/relevant?id=&limit=16').then((res) => {
        if (res.data.msg == "操作成功") {
          this.str = res.data.result;
          //  console.log(this.str);
        }
      });
    // });
    
  },
  methods: {
    clk(i) {
      this.fade = i;
    },
    prev() {
      if (this.fade == 0) {
        this.fade = 3;
      } else {
        this.fade--;
      }
    },
    next() {
      if (this.fade == 3) {
        this.fade = 0;
      } else {
        this.fade++;
      }
    },
  },
};
</script>

<style  scoped>
.active {
  background: #27ba9b !important;
}

.goods-relevant[data-v-f1713bb2] {
  width: 1240px;
  background: #fff;
  min-height: 460px;
  margin-top: 20px;
  position: relative;
  margin: 0 auto;
}

.goods-relevant .header[data-v-f1713bb2] {
  height: 80px;
  line-height: 80px;
  padding: 0 20px;
}

.goods-relevant .header .icon[data-v-f1713bb2] {
  width: 16px;
  height: 16px;
  display: inline-block;
  border-top: 4px solid #27ba9b;
  border-right: 4px solid #27ba9b;
  box-sizing: border-box;
  position: relative;
  transform: rotate(45deg);
}

.goods-relevant .header .title[data-v-f1713bb2] {
  font-size: 20px;
  padding-left: 10px;
}

[data-v-f1713bb2] .xtx-carousel {
  height: 380px;
}

.prev1 {
  position: absolute;
  top: 176px;
  left: 20px;
  width: 30px;
  height: 30px;
  background: #000;
}

.prev1 i {
  font-size: 30px;
  color: #ccc;
}

.next1 {
  position: absolute;
  top: 176px;
  right: 20px;
  width: 30px;
  height: 30px;
  background: #000;
}

.next1 i {
  font-size: 30px;
  color: #ccc;
}

.xtx-carousel[data-v-51374c56] {
  width: 100%;
  height: 100%;
  min-width: 300px;
  min-height: 150px;
  position: relative;
  overflow: hidden;
}

.slider[data-v-51374c56] {
  display: flex;
  justify-content: space-around;
  padding: 0 40px;
}

.slider>a img[data-v-51374c56] {
  padding: 20px;
  width: 230px !important;
  height: 230px !important;
}

.ellipsis,
.ellipsis-2 {
  text-overflow: ellipsis;
  overflow: hidden;
}

.ellipsis {
  white-space: nowrap;
}

.slider>a .price[data-v-51374c56] {
  font-size: 16px;
  color: #cf4444;
  margin-top: 15px;
}

.slider>a[data-v-51374c56] {
  width: 240px;
  text-align: center;
}

.xtx-carousel:hover .carousel-btn[data-v-51374c56] {
  opacity: 1;
}

.xtx-carousel .carousel-btn.prev1[data-v-51374c56] {
  left: 20px;
}

.xtx-carousel .carousel-btn.naxt1[data-v-51374c56] {
  left: 20px;
}

[data-v-f1713bb2] .xtx-carousel .carousel-btn {
  top: 110px;
  opacity: 1;
  background: transparent;
  color: #ddd;
}

.xtx-carousel .carousel-btn[data-v-51374c56] {
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 228px;
  z-index: 2;
  text-align: center;
  line-height: 44px;
  opacity: 0;
  transition: all 0.5s;
}

.carousel-indicator {
  position: absolute;
  bottom: 30px;
  left: 46%;
}

.carousel-indicator span {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  float: left;
  background: rgba(0, 0, 0, 0.2);
  margin-left: 12px;
  z-index: 1000;
}

.xtx-carousel .carousel-indicator[data-v-51374c56] {
  position: absolute;
  left: 0;
  bottom: -60px;
  z-index: 200;
  width: 100%;
  text-align: center;
  height: 20px;
}

.slider>a .name[data-v-51374c56] {
  font-size: 16px;
  color: #666;
  padding: 0 40px;
}

carousel-item {
  overflow: hidden;
  transition: all 0.5 linear;
}
</style>